<template>
  <div>
    <!-- 二级路由  占位符 -->
    <router-view/>

    <!-- 底部选项卡 -->
    <mt-tabbar v-model="tabSelected"  fixed>
      <mt-tab-item id="index" >
         <img :src="require(`@/assets/main_${tabSelected=='index' ? '1':'0'}.png`)" slot="icon" />
        首页
      </mt-tab-item>
 
      <mt-tab-item id="me">
         <img :src="require(`@/assets/me_${tabSelected=='me' ? '1':'0'}.png`)" slot="icon" />
        我的
      </mt-tab-item>
    </mt-tabbar>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tabSelected:this.$route.path.split('/').pop()
    };
  },

  watch:{
    tabSelected(newValue,oldValue){
      console.log(newValue);
      // this.$router.push('/home/${newValue}')
      if (newValue == 'index') {
        this.$router.push('/home/index')
      }else if(newValue == 'me'){
        this.$router.push('/home/me')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
